<template>
  <el-button
    v-bind="btn"
    @click="onClick"
  >
    <template v-if="label">
      {{ label }}
    </template>
  </el-button>
</template>
<script>
/**
   * 具有自切换功能的【行/独立】按钮
   */
export default {
  props: {
    /**
     * 按钮定义
     */
    switch: {
      type: [Boolean, String],
      default: false
    },
    value: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    label () {
      return this.getSwitchValue('label')
    },
    type () {
      return this.getSwitchValue('type')
    },
    icon () {
      return this.getSwitchValue('icon')
    },
    btn () {
      const vm = this
      return {
        ...vm.$attrs,
        type: vm.type,
        label: vm.label,
        icon: vm.icon
      }
    }
  },
  // 需要添加刷新消息
  methods: {
    onClick () {
      const vm = this
      const btn = {
        ...vm.btn,
        url: vm.getSwitchValue('url')
      }
      this.$emit('click', btn)
    },
    getSwitchValue (key) {
      if (this.$attrs[key] === undefined) return undefined

      if (this.switch && this.$attrs[key]) return this.$attrs[key][this.value ? 1 : 0]

      return this.$attrs[key]
    }
  }
}

</script>
